<!--
 * @Author: wangmingshuo
 * @Date: 2020-04-22 13:58:56
 * @LastEditTime: 2020-06-10 18:08:11
 * @FilePath: /myLittleNest/pages/index.vue
-->
<template>
	<div>
		<div class="mian">
			<div class="banner">
				<Banner />
			</div>
			<section class="skill">
				<div class="container">
					<div class="the-title">
						<h3>Professional Skills</h3>
					</div>
					<div class="skill-view">
						<div v-for="(item, index) in skillList" :key="index">
							<h3>
								{{ item.name }} <span>{{ item.num + '%' }}</span>
							</h3>
							<el-progress :show-text="false" :stroke-width="8" color="#378C3F" :percentage="item.num"></el-progress>
						</div>
					</div>
				</div>
			</section>
			<section class="portfolio">
				<div class="container">
					<div class="the-title">
						<h3>Portfolio</h3>
					</div>
					<div class="portfolio-view">
						<div class="portfolio-top">
							<div @click="active = 1" :class="{ active: active == 1 }">
								<i class="iconfont icon-bijibendiannao1"></i>
							</div>
							<div @click="active = 2" :class="{ active: active == 2 }">
								<i class="iconfont icon-xiangce"></i>
							</div>
							<div @click="active = 3" :class="{ active: active == 3 }">
								<i class="iconfont icon-xiangji"></i>
							</div>
						</div>
						<div class="portfolio-bot">
							<ul>
								<li v-for="n in 4" :key="n">
									<img :src="'/images/project-' + n + '.jpg'" alt="" />
								</li>
							</ul>
						</div>
					</div>
				</div>
			</section>
			<section class="experience">
				<div class="container">
					<div class="the-title">
						<h3>Work Experience</h3>
					</div>
					<div class="experience-view">
						<ul>
							<li v-for="(item, index) in experienceList" :key="index">
								<div class="left">
									<p>{{ item.working_time }}</p>
									<h3>{{ item.company_name }}</h3>
								</div>
								<div class="right">
									<h3 class="hover-underline-animation">{{ item.position }}</h3>
									<p>{{ item.synopsis }}</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</section>
		</div>
	</div>
</template>

<script>
import Nav from '~/components/Nav';
import Banner from '~/components/Banner';
import Footer from '~/components/Footer';
export default {
	components: {
		Nav,
		Banner,
		Footer,
	},
	data() {
		return {
			skillList: [
				{
					name: 'HTML5',
					num: 70,
				},
				{
					name: 'CSS',
					num: 65,
				},
				{
					name: 'VUE',
					num: 70,
				},
				{
					name: 'JS',
					num: 70,
				},
			],
			active: 1,
			/**
			 * working_time: 工作时间
			 * position: 职位
			 * synopsis: 简介
			 */
			experienceList: [
				{
					company_name: '上海众简信息技术有限公司',
					working_time: '2019/08 至 至今',
					position: 'Web前端工程师',
					synopsis:
						'Euismod massa scelerisque suspendisse fermentum habitant vitae ullamcorper magna quam iaculis, tristique sapien taciti mollis interdum sagittis libero nunc inceptos tellus, hendrerit vel eleifend primis lectus quisque cubilia sed mauris. Lacinia porta vestibulum diam integer quisque eros pulvinar curae, curabitur feugiat arcu vivamus parturient aliquet laoreet at, eu etiam pretium molestie ultricies sollicitudin dui.',
				},
				{
					company_name: '郑州滋祺信息技术有限公司',
					working_time: '2018/06 至 2019/05',
					position: 'Web前端工程师',
					synopsis:
						'Euismod massa scelerisque suspendisse fermentum habitant vitae ullamcorper magna quam iaculis, tristique sapien taciti mollis interdum sagittis libero nunc inceptos tellus, hendrerit vel eleifend primis lectus quisque cubilia sed mauris. Lacinia porta vestibulum diam integer quisque eros pulvinar curae, curabitur feugiat arcu vivamus parturient aliquet laoreet at, eu etiam pretium molestie ultricies sollicitudin dui.',
				},
			],
		};
	},
	created() {},
	mounted() {},
	methods: {},
};
</script>

<style scoped lang="scss">
.skill {
	height: 310px;
	background-color: #fff;

	.skill-view {
		width: 100%;
		height: 200px;
		display: flex;
		box-sizing: border-box;
		padding: 20px;
		justify-content: space-between; //两端对齐，项目之间的间隔都相等。
		flex-wrap: wrap; //换行且第一行在上方
		box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
		line-height: 50px;

		& > div {
			display: inline-block;
			width: calc(100% / 2 - 30px) !important;

			& > h3 {
				font-size: 16px;
				color: #378c3f;

				& > span {
					float: right;
				}
			}
		}
	}
}
.portfolio {
	.container {
		.portfolio-view {
			.portfolio-top {
				display: flex;
				justify-content: center;
				div {
					width: 60px;
					height: 60px;
					text-align: center;
					line-height: 60px;
					border-radius: 50%;
					color: #9a9a9a;
					transition: all 300ms ease 0s;
					background-color: rgba(222, 222, 222, 0.3);
					i {
						font-size: 32px;
					}
					&:nth-child(2) {
						margin: 0 15px;
					}
				}
				div.active {
					background-color: #378c3f;
					color: #fff;
					box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3);
				}
			}
			.portfolio-bot {
				height: 745px;
				margin-top: 50px;
				ul {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					padding: 0 45px;
					box-sizing: border-box;
					overflow: hidden;
					li {
						width: 540px;
						height: 350px;
						margin-bottom: 15px;
						box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
						img {
							width: 100%;
							height: 100%;
						}
					}
					li:nth-child(2) {
						height: 325px !important;
					}
					li:nth-child(4) {
						height: 325px !important;
						margin-top: -25px;
					}
				}
			}
		}
	}
}
.experience {
	.experience-view {
		ul {
			li {
				height: 190px;
				width: 100%;
				margin-bottom: 20px;
				box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
				border-radius: 3px;
				.left {
					float: left;
					width: 265px;
					height: 100%;
					padding-top: 60px;
					box-sizing: border-box;
					border-radius: 3px 0px 0px 3px;
					background-color: #378c3f;
					p {
						margin-bottom: 15px;
						font-size: 14px;
						font-weight: 400;
						font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
						text-align: center;
						color: #fff;
						text-transform: uppercase;
					}
					h3 {
						font-size: 18px;
						font-family: inherit;
						font-weight: 500;
						text-align: center;
						color: #fff;
					}
				}
				.right {
					float: left;
					width: calc(100% - 265px);
					padding: 20px;
					padding-left: 30px;
					box-sizing: border-box;
					color: #2c2c2c;
					h3 {
						font-size: 24px;
						margin-bottom: 15px;
					}
				}
			}
		}
	}
}
.hover-underline-animation {
	display: inline-block;
	position: relative;
}
.hover-underline-animation::after {
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #378c3f;
	transform-origin: bottom right;
	transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}
.footer {
	height: 50px;
}
</style>
